<template>
  <el-dialog
    v-el-drag-dialog="fullScreen"
    class="pre-dialog"
    title="预览"
    :visible="visible"
    :append-to-body="appendToBody"
    width="900px"
    :show-close="false"
    @opened="openDialog"
    @close="doClose"
    @update:visible="updateVisible">
    <div slot="title">
      预览
      <span
        @click="()=>updateVisible(false)"
        class="close-btn">
        <i class="el-icon-close" />
      </span>
    </div>
    <div class="pre-box" v-if="visible">
      <div class="pre-box-view">
        <div class="pic-area" :style="[computedInnerStyle]">
          <img v-if="String(form.type) === FILETYPE.PICTURE" :style="[computedInnerStyle]" :src="form.path" class="limitImg" />
          <div class="limitVideo" v-else-if="String(form.type) === FILETYPE.VIDEO" :style="[computedInnerStyle]">
            <video ref="videoPlay" :style="[computedInnerStyle]" controls autoplay :src="form.path"></video>
          </div>
          <template v-if="form.qrCode && doShowEwm">
            <vue-draggable-resizable :w="width" :h="height" :x="x" :y="y" :min-width="30" :min-height="30" @dragging="onDrag" @resizing="onResize" :parent="true" :lock-aspect-ratio="true" style="z-index: 9999;">
              <div id="qrcode" ref="qrcode"></div>
            </vue-draggable-resizable>
          </template>
        </div>
      </div>
      <div class="pre-box-info">
        <div>
          <el-tooltip :content="form.name" placement="bottom">
            <p style="height:16px;">名称: {{ form.name }}</p>
          </el-tooltip>
          <p>类型: {{ form.type | getTypeName }}</p>
          <p>大小: {{ form.fileSize }}</p>
          <p :title="form.comment">描述: {{ form.comment }}</p>
          <p>创建时间: {{ form.createdAt }}</p>
          <p>被使用: {{ form.refCount }}</p>
          <p>状态: {{ form | getStateName }}</p>
          <p>有效性: {{ form.validity ? '有效' : '无效' }}</p>
          <p>二维码地址: 
            <a :href="form.qrCode" target="_blank">{{ form.qrCode }}</a>
          </p>
          <!-- <p>X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p> -->
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { fileTypeOpts, FILETYPE } from '../../media-center/const'
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import QRCode from 'qrcodejs2'

export default {
  name: 'preview-dialog',
  directives: {
    elDragDialog
  },
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    },
    isShowType: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      FILETYPE,
      fullScreen: false,
      width: 300,
      height: 300,
      ewmDefaultArea: 300,
      x: 0,
      y: 0,
      wrapperWidth: 500,
      wrapperHeight: 500,
      qrcode: null,
      isChange: false,
      radio: 1,
      doShowEwm: false
    }
  },
  components: {
    VueDraggableResizable
  },
  filters: {
    auditStateFilter(val) {
      let msg = ''
      switch(val){
        case 0:
          msg = '待审核'
          break
        case 1:
          msg = '审核通过'
          break
        case -1:
          msg = '审核不通过'
          break
      }
      return msg
    },
    getTypeName(v) {
      let fileType = fileTypeOpts.find(item => item.value == v)
      return fileType ? fileType.label : v
    },
    getStateName(v) {
      let msg = ''
      if(v.auditState === 0) {
        // -1:待转码 -2:转码失败 -3:转码中
        switch(v.state) {
          case -1:
            msg = '待转码'
            break
          case -2:
            msg = '转码失败'
            break
          case -3:
            msg = '转码中'
            break
          default:
            msg = "不可用"
        }
        return msg
      } else {
        return v.auditState == '3' ? '可用' : '不可用'
      }
    },
    validityFilter(val,te) {
      if(val) {
        return te('有效')
      }
      return te('无效')
    }
  },
  computed: {
    computedInnerStyle() {
      const {width, height} = this.form // 现实模版宽高
      let styleWidth;                 // 最终模版在容器的宽
      let styleHeight;                // 最终模版在容器的高
      let ratio;                      // 缩放比
      let wrapRatio = width / height
      if(wrapRatio > 1) {
        ratio = this.wrapperWidth / width
        styleWidth = `${this.wrapperWidth}px`
        styleHeight = Math.round(height * ratio) + 'px'
      }else if(wrapRatio < 1) {
        ratio = this.wrapperHeight / height
        styleWidth =  Math.round(width * ratio) + 'px'
        styleHeight = `${this.wrapperHeight}px`
      } else {
        ratio = 1 //this.wrapperWidth / width
        if(this.wrapperWidth > width) {
          styleWidth = `${width}px`
        } else {
           styleWidth = `${this.wrapperWidth}px`
        }
        if(this.wrapperHeight > height) {
          styleHeight = `${height}px`
        } else {
          styleHeight = `${this.wrapperHeight}px`
        }
      }
      this.$nextTick(() => {
        this.radio = ratio
      })
      console.log("计算属性:", width, height, styleWidth, styleHeight, ratio)
      return {
        width: styleWidth,
        height: styleHeight
      }
    }
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    },
    onResize: function (x, y, width, height) {
      this.isChange = true
      this.x = x
      this.y = y
      this.width = width
      this.height = height
      this.repaintEwm()
    },
    onDrag: function (x, y) {
      this.isChange = true
      this.x = x
      this.y = y
    },
    openDialog() {
        this.isChange = false
        this.width = Math.round((this.form.qrCodeW || this.ewmDefaultArea) * this.radio)
        this.height = Math.round((this.form.qrCodeH || this.ewmDefaultArea) * this.radio)
        this.x = Math.round((this.form.qrCodeX || 0) * this.radio)
        this.y = Math.round((this.form.qrCodeY || 0) * this.radio)
        console.group()
        console.log('w/h', this.form.qrCodeW, this.form.qrCodeH, this.radio)
        console.log('x/y', this.form.qrCodeX, this.form.qrCodeY, this.radio)
        console.log(this.width, this.height, this.x, this.y)
        console.groupEnd()
        this.$nextTick(() => {
          this.doShowEwm = true
          setTimeout(() => {
            this.creatQrCode()
          }, 200);
        })
    },
    creatQrCode() {
      if(this.form.qrCode) {
        this.qrcode = new QRCode('qrcode', {
          text: `${this.form.qrCode}`,
          width: this.width,
          height: this.height,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: 0,
          render: 'canvas'
        })
      }
    },
    repaintEwm() {
      if(this.qrcode) {
        this.qrcode = null
        this.$refs.qrcode.innerHTML = ''
        this.creatQrCode()
      }
    },
    // 关闭
    doClose() {
        this.updateVisible(false)
        if(this.qrcode) {
          this.qrcode = null
          this.$refs.qrcode.innerHTML = ''
          if(this.isChange) {
            this.handleConfirm()
          }
        }
    },
    handleConfirm() {
      const w = Math.round(this.width / this.radio)
      const h = Math.round(this.height / this.radio)
      let qrCodeW = w
      let qrCodeH = h
      console.log("computed end", w, h, qrCodeW, qrCodeH)
      const x =  Math.round(this.x / this.radio)
      const y = Math.round(this.y / this.radio)
      
      const qrCodeX = x + qrCodeW > this.form.width ? this.form.width - qrCodeW : x
      const qrCodeY = y + qrCodeH > this.form.height ? this.form.height - qrCodeH : y
      this.$set(this.form, 'qrCodeW', qrCodeW)
      this.$set(this.form, 'qrCodeH', qrCodeH)
      this.$set(this.form, 'qrCodeX', qrCodeX)
      this.$set(this.form, 'qrCodeY', qrCodeY)
      console.log(this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

.pre-dialog {
  ::v-deep .el-dialog__header .el-dialog__headerbtn {
    top: 8px;
  }
  ::v-deep .is-fullscreen.el-dialog {
    display: flex;
    flex-direction: column;
  }
  ::v-deep .is-fullscreen.el-dialog .el-dialog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  ::v-deep .is-fullscreen.el-dialog .el-dialog__body .pre-box {
    flex: 1;
  }
}
.full-screen-btn {
  position: absolute;
  right: 50px;
  top:8px;
  i{ font-size: 14px; color:#666;}
}
.close-btn {
  cursor: pointer;
  position: absolute;
  right: 24px;
  top:9px;
  i{ font-size: 16px; color:#666;}
}
.pre-box {
  display: flex;
  align-items: stretch;

  .padding-0 {
    padding: 0;
    padding-bottom: 10px;
  }

  .showtype-title {
    margin: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__label {
      margin-right: 20px;
    }

    &__value {
      // width: 750px;
      flex: 1;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      border: 1px solid $bg-e9;
    }
  }

  &-view {
    flex: 1;
    padding: 20px;
    .pic-area {
      background: $bg-f4;
      .limitImg {
        position: absolute;
      }
      .limitVideo {
        position: absolute;
      }
      .limitVA {
        width: 100%;
        max-height: 500px;
        object-fit: contain;
      }
    }
  }

  &-info {
    flex-basis: 360px;
    width: 360px;
    border-left: 1px solid $bg-e9;
    padding: 30px;
    position: relative;
    p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 0;
    }
  }
  
}
.icon-quanping{ font-size: 12px; color:#909399; }
</style>